<template>
  <Crumbs
    :crumbName="[
      {
        route: '/forum/manage',
        name: '论坛管理',
      },
      {
        route: '',
        name: '论坛详情',
      },
    ]"
  ></Crumbs>
  <a-card style="min-height: 93%">
    <div v-if="forumDetailsData">
      <a-row>
        <a-col :span="6" class="information">
          <a-row :style="{ height: '100%' }">
            <a-col :span="6">
              <div class="publisher-img">
                <img :src="forumDetailsData.avatar" alt />
              </div>
            </a-col>
            <a-col :span="18">
              <p>{{ forumDetailsData.username }}</p>
              <p>
                <span>发布日期：</span>
                {{ forumDetailsData.createtime }}
              </p>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <h1 style="font-weight: 700; font-size: 24px; margin-top: 15px">
            {{ forumDetailsData.title }}
          </h1>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" class="article-content">
          <div class="content_div" v-html="forumDetailsData.content"></div>
        </a-col>
      </a-row>
      <a-divider />
      <a-row class="comment-content" v-if="forumCommentData">
        <a-col :span="24">
          <a-row>
            <a-col :span="24">
              <h3>评论区</h3>
            </a-col>
          </a-row>
          <a-divider />
          <a-row v-for="item in forumCommentData" :key="item.id">
            <a-col :span="2">
              <div class="reviewers">
                <img :src="item.avatar" alt />
              </div>
            </a-col>
            <a-col :span="22">
              <p>{{ item.username }}</p>
              <div v-html="item.content" class="content_div"></div>
              <p style="font-size: 12px">
                {{ item.createtime }}
                <a-popover
                  v-if="
                    this.$store.state.userStore.userInfos?.role_id === 3 ||
                    this.$store.state.userStore.userInfos?.status == 'false'
                  "
                  class="delete-comment"
                >
                  <template #content>
                    <p>暂无权限</p>
                  </template>
                  <a>删除</a>
                </a-popover>
                <a-popconfirm
                  v-else
                  class="delete-comment"
                  title="此操作将永久删除该评论, 是否继续?"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="delComment(item.id)"
                  @cancel="cancelDel"
                >
                  <a>删除</a>
                </a-popconfirm>
              </p>
            </a-col>
            <a-divider />
          </a-row>
        </a-col>
      </a-row>
      <a-pagination
        style="margin-top: 20px; margin-bottom: 60px"
        v-model:current="current"
        :total="commentTotal"
        show-less-items
        @change="commentPaging"
      />
      <a-divider />
      <a-row>
        <a-col :span="24">
          <h3 style="font-weight: 700">发表评论</h3>
        </a-col>
      </a-row>
      <a-divider />
      <a-comment>
        <template #avatar>
          <a-avatar
            :src="this.$store.state.userStore.userInfos?.avatar"
            :alt="this.$store.state.userStore.userInfos?.username"
          />
        </template>
        <template #content>
          <a-form-item>
            <a-textarea :rows="4" v-model:value="commentValue" />
          </a-form-item>
          <a-form-item>
            <a-button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="
                handleSubmit(
                  forumDetailsData?.id,
                  this.$store.state.userStore.userInfos
                )
              "
              >发表</a-button
            >
          </a-form-item>
        </template>
      </a-comment>
    </div>
  </a-card>
</template>

<script>
// 导入router
import { useRoute } from "vue-router";
// 导入面包屑组件
import Crumbs from "@/components/Crumbs";
// 导入获取论坛详情
import { useGetForumDetails } from "./useGetForumDetails";
// 导入获取论坛评论
import { useGetForumComment } from "./useGetForumComment";
// 导入分页
import { usePagination } from "./usePagination";
// 导入删除评论方法
import { useDelForumComment } from "./useDelForumComment";
// 导入发布评论
import { usePublishComment } from "./usePublishComment";

export default {
  name: "",
  components: {
    Crumbs,
  },
  setup() {
    // 使用route
    const route = useRoute();

    // 获取论坛详情数据
    const { forumDetailsData } = useGetForumDetails(route.params.id);

    // 获取论坛评论数据
    const {
      current,
      pagesize,
      commentTotal,
      forumCommentData,
      getCommentData,
    } = useGetForumComment(route.params.id);

    // 点击分页
    const { commentPaging } = usePagination(current, getCommentData);

    // 删除评论
    const { cancelDel, delComment } = useDelForumComment(getCommentData);

    // 发布评论
    const { commentValue, submitting, handleSubmit } = usePublishComment(
      getCommentData,
      current,
      pagesize,
      commentTotal
    );

    return {
      forumDetailsData, // 论坛详情数据
      forumCommentData, // 论坛评论数据
      current, // 当前页
      pagesize, // 每页条数
      commentTotal, // 总条数
      commentPaging, // 点击分页
      cancelDel, // 取消删除
      delComment, //删除评论
      commentValue, // 发表内容
      submitting, // 发表状态
      handleSubmit, // 点击发表
    };
  },
};
</script>
<style scoped lang="less">
.content_div {
  /*设置内容超出后自动换行*/
  word-wrap: break-word;
  word-break: break-all;
}
.publisher-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}

.article-content {
  > p {
    height: 30px;
    border-bottom: 1px solid #eee;
    span:last-child {
      margin-left: 10px;
    }
  }
  > div {
    margin-top: 10px;
  }
}
.comment-content {
  margin-top: 30px;
  h3 {
    font-weight: 700;
  }
  .reviewers {
    position: relative;
    top: 15px;
    left: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    margin-bottom: 0;
    height: 40px;
    line-height: 40px;
  }
}
.delete-comment {
  margin-left: 10px;
  color: red;
}
</style>
